<template>
  <div class="container">
    <!-- <div class="left" style="padding-right: 3px"> -->
    <div class="left">
      <div class="box1">
        <div class="font">{{ titlecar }}</div>
        <div class="font2" :style="{ color: stylecolor1.color }">
          {{ carnum }}
        </div>
      </div>
    </div>
    <el-divider direction="vertical"></el-divider>
    <div class="right">
      <div class="box1" style="min-width: 4vw">
        <p class="font">较昨日</p>
        <div class="font2 flex" style="color: #fff">
          <!-- <div style="width: 100%">{{ jytcarnum }}</div> -->
          <div style="margin-right: 0.25vw">{{ jytcarnum }}</div>
          <img :src="isPositive ? imgUrl1 : imgUrl2" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "blueBox2",
  props: {
    stylecolor: {
      type: Object,
      default: function () {
        return {
          color: "#fff",
        };
      },
    },
    titleCar: {
      type: String,
    },
    carNum: {
      type: Number,
    },
    jytcarNum: {
      type: Number,
    },
  },
  data() {
    return {
      imgUrl1: require("../assets/images/peovehicle/up.png"),
      imgUrl2: require("../assets/images/peovehicle/down.png"),
      isPositive: false,
    };
  },
  computed: {
    stylecolor1() {
      return this.stylecolor;
    },
    titlecar() {
      return this.titleCar;
    },
    carnum() {
      return this.carNum;
    },
    jytcarnum() {
      if (this.jytcarNum <= 0) {
        this.isPositive = false;
        return Math.abs(this.jytcarNum * 1);
      } else {
        this.isPositive = true;
        return this.jytcarNum * 1;
      }
    },
    imgSure() {
      if (this.jytcarNum <= 0) {
        return this.imgUrl2;
      } else {
        return this.imgUrl1;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  display: flex;
  width: 9.2vw;
  height: 2.34vw; /* 设置的div框的宽高*/
  background: url("../assets/images/peovehicle/peobk.png") no-repeat;
  /* 以父元素的百分比来设置背景图像的宽度和高度。*/
  background-size: 100% 100%;
  .left,
  .right {
    width: 50%;
  }
}

.box1 {
  // padding: 0.3vw 0.2vw 1.38vw 0.2vw;
  padding: 0.3vw 0 1.38vw 0;
  text-align: center;
  width: 100%;
}
.box2 {
  margin: 0.42vw 0 0 0.94vw;
}
.font {
  color: white;
  font-size: 0.65vw;
}
.font2 {
  font-size: 0.8vw;
  text-align: center;
  padding: 0.21vw 0 0 0;
  justify-content: center;
}
.font3 {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  color: white;
  font-size: 0.68vw;
  text-align: center;
  padding: 0.21vw 0 0 0;
}
.font3 img {
  width: 0.39vw;
  height: 0.39vw;
  object-fit: cover;
}
.wt {
  width: 100%;
  overflow: hidden;
}
.el-divider--vertical {
  display: inline-block;
  width: 1px;
  height: 1.04vw;
  /* margin: 0 1px; */
  margin: 0.65vw 0 0.68vw 0;
  vertical-align: middle;
  position: relative;
}
</style>
